$(function () {
    // 1.1 获取裁剪区域的 DOM 元素
    var $image = $('#image')

    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $image.cropper(options)

    $("#choosbtn").on("click", function () {
        $("#file").click()
    })

    $("#file").on('change', function (e) {
        // console.log(e)
        let fil = e.target.files
        console.log(fil)
        // 判断,如果里面的值等于0则提示用户没有上传图片
        if (fil.length === 0) {
            return layui.layer.msg('请上传图片')
        }
        let imgURL = URL.createObjectURL(fil[0])
        // console.log(imgURL)
        $image.cropper("destroy")
            .attr("src", imgURL)
            .cropper(options)
    })
    $("#btnOne").on("click", function () {
        let dataURL = $image
            .cropper('getCroppedCanvas', {
                // 创建一个 Canvas 画布
                width: 100,
                height: 100
            })
            .toDataURL('image/png')
        $.ajax({
            type: 'post',
            url: "/my/update/avatar",
            data: {
                avatar: dataURL
            },
            success: (res) => {
                if (res.status!= 0) return layui.layer.msg('上传图片失败')

                layui.layer.msg('上传图片成功')
                window.parent.grtUserInfo()
            }

        })
    })
})